<template>
  <div class="container">

    <!-- 顶部导航栏 -->
    <div class="topNav">
      <div class="nav">
        <div v-for="item in topNavList.children"
             :key="item.meta.id"
             :class="currentIndex === item.meta.id ? 'navActive' : ''"
             class="navItem"
             @click="navActiveClick(item)"
        >{{ item.meta.title }}
        </div>
      </div>

    </div>
    <div class="content">
      <!-- 路由组件渲染位置 -->
      <router-view></router-view>
    </div>

  </div>
  >>>>>>> 9d6c050 (课程选项功能)
</template>

<script lang="ts">
  import {defineComponent, watch} from "vue";

  export default defineComponent({
    name: "course",
  });

</script>

<script lang="ts" setup>
  import {onMounted, ref} from "vue";
  import {useRouter, useRoute, RouteRecordRaw} from "vue-router";

  const router = useRouter();
  const route = useRoute();
  const topNavList = ref<RouteRecordRaw>({});
  const currentIndex = ref(route.meta.id);

  //初始化挂载生命周期
  onMounted(() => {
    topNavList.value = router.options.routes.find((item) => {
      return item.name === "Course";
    }) as RouteRecordRaw;
  });

  //切换选项卡逻辑
  const navActiveClick = (routeInfo: RouteRecordRaw) => {
    //路由跳转到对应页面
    router.push({path: routeInfo.path});
  };
  //监听路由变化切换选项卡样式
  watch(route, () => {
    currentIndex.value = route.meta.id;
  });

</script>

<style lang="less">
  .container {
    background-color: #f5f7f9;
  }

  .content {
    width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* 顶部导航栏 */
  .topNav {
    width: 100%;
    box-sizing: border-box;
    height: 80px;
    background: #fff;
    padding-bottom: 3px;
    margin-top: 5px;
    margin-bottom: 10px;

    .nav {
      width: 1200px;
      box-sizing: border-box;
      height: 80px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin: auto;
    }

    .navItem {
      font-size: 16px;
      margin: 10px 20px;
      padding: 20px 4px;
      cursor: pointer;
      font-weight: 400;
    }

    .navActive {
      border-bottom: 3px solid #000;
    }
  }

  .content {
    width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
  }
</style>
>>>>>>> 9d6c050 (课程选项功能)
